<template>
  <div class="my-dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="dialogForm.title"
      :width="dialogForm.width"
    >
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="数据转移：" :label-width="formLabelWidth">
          将勾选的常驻记录转移到另一位人员名下
        </el-form-item>
        <el-form-item
          label="数据转移至："
          :label-width="formLabelWidth"
          prop="targetId"
        >
          <el-select
            v-model="form.targetId"
            filterable
            placeholder="输入姓名/手机号搜索匹配"
            :filter-method="filterTarget"
            clearable
          >
            <el-option
              v-for="item in TargetUsers"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
              <span style="float: left">{{ item.userName }}</span>
              <span
                style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
              >
                {{ item.userLogin }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据转移原因：" :label-width="formLabelWidth">
          <el-input
            v-model="form.reason"
            autocomplete="off"
            type="textarea"
            :rows="4"
            placeholder="请输入数据转移原因"
          />
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <el-button @click="resetForm(ruleFormRef)" :loading="loading"
          >返回</el-button
        >
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          :loading="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { store } from '@/store'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch, computed } from 'vue'
import { getTargetUserApi, transferByDataApi } from '../api/familyApi'
const dialogVisible = ref<boolean>(false) //弹窗是否出现
const ruleFormRef = ref<FormInstance>()
const formLabelWidth = '140px'
const dialogForm = {
  width: '30%',
  title: '数据转移',
}
//监听加载
const loading = computed(() => {
  return store.getters['loading/getLoad']
})

interface PropsDialog {
  isShowDialog: boolean //弹窗是否出现
  dialogData?: any
}
const props = withDefaults(defineProps<PropsDialog>(), {
  isShowDialog: false,
})

//监控弹窗是否出现
watch(
  () => props.isShowDialog,
  () => {
    form.targetId = ''
    form.reason = ''
    ruleFormRef.value?.clearValidate('targetId')
    dialogVisible.value = !dialogVisible.value
  }
)

const form = reactive({
  targetId: '',
  reason: '',
})

const rules = reactive<FormRules>({
  targetId: [
    {
      required: true,
      message: '请选择转移目标人员',
      trigger: 'change',
    },
  ],
})

//获取转移目标人数据及筛选
const TargetUsers: any = ref([])
const TargetUsersCopy: any = ref([])
const TargetUserChange = (val: any) => {
  let params = { keyword: val }
  getTargetUserApi(params).then((res) => {
    if (res.code == 0) {
      TargetUsers.value = res.data
      TargetUsersCopy.value = res.data
    }
  })
}
TargetUserChange('')
const filterTarget = (val: any) => {
  if (val) {
    TargetUsers.value = TargetUsersCopy.value.filter((item) => {
      if (
        item.userLogin.indexOf(val) != -1 ||
        item.userName.indexOf(val) != -1
      ) {
        return true
      }
    })
  } else {
    TargetUsers.value = TargetUsersCopy.value
  }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = !dialogVisible.value
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = {
        dataIdList: props.dialogData,
        targetId: form.targetId,
        reason: form.reason,
      }
      transferByDataApi(params).then((res) => {
        if (res.code == 0) {
          ElMessage.success('转移成功!')
          form.targetId = ''
          form.reason = ''
          dialogVisible.value = !dialogVisible.value
        }
      })
      store.commit('loading/setLoad', false)
    } else {
      store.commit('loading/setLoad', false)
    }
  })
}
</script>
<style scoped lang="scss">
.btn-box {
  text-align: right;
}
</style>
